<template>

    <div class="wrapper" :style="`backgroundImage: url(${bg_head})`">
        <!-- 背景图 -->
        <div style="position: absolute;width: 96%;height: auto;left: 2%;top: 10%;z-index: 20;">

            <!-- 二维码 -->
            <div class="qr_continer">
                <div style="position: relative;">
                    <div class="top_card">
                        <div class="card_left">
                            <div class="top">
                                <div class="top_title">
                                    <b>门店: </b>
                                    <span>{{activity_info.name}}</span>
                                </div>
                                <div class="top_time">
                                    <b>时间: </b>
                                    <span>{{activity_info.time_range}}</span>
                                </div>
                                <div class="top_address">
                                    <b>地址: </b>
                                    <span>{{activity_info.address}}</span>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="ticket_r ticket_r_l_b"></div>
                    <div class="ticket_r ticket_r_r_b"></div>
                </div>

                <div class="bottom_qr">


                    <div class="ticket_r ticket_r_l_t"></div>
                    <div class="ticket_r ticket_r_r_t"></div>


                    <div>
                        <p><b style="font-size: 18px">恭喜您报名成功</b></p>
                        <vue-qr :text="clue_info.out_trade_no +  ''" :margin="20" :size="200"></vue-qr>
<!--                        <p v-if="clue_info.money>0" style="font-size: 13px">T {{clue_info.out_trade_no}}</p>-->
                        <p class="tips" style="font-size: 12px;margin-bottom: 25px">
                            <span v-if="clue_info.status == 1">(凭此二维码去现场兑换豪华礼包)</span>
                            <span v-else-if="clue_info.status == 3">(您已核销)</span>
                            <span v-else-if="clue_info.status == 4">(您已退款)</span>
                            <span v-else>(暂未支付，如您已支付，请三秒后刷新页面)</span>
                        </p>
                    </div>
                    <div class="action_btns" style="margin-top: 10px;border-top: dashed 1px #ccc;padding-top: 20px">
                        <!-- 门票介绍 -->
                        <div style="text-align: left;">
                            <div style="font-size: 14px; margin-bottom: 4px;">姓名：{{clue_info.name}}</div>
                            <div style="font-size: 14px; margin-bottom: 4px;">电话：{{clue_info.phone}}</div>
                            <div style="font-size: 14px; margin-bottom: 4px;">车型：{{clue_info.series}}</div>
<!--                            <div style="font-size: 14px;" v-if="money>0 && state == 1 || state == 3">金额：￥{{to_yuan(clue_info.money)}}</div>-->
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    // import lib_byd from "@/libs/lib_byd";
    import _geturl from "@/utils/_geturl";
    import _time from "@/utils/_time";
    import vueQr from 'vue-qr'
    import _url from "../../utils/_url";
    import api_clue from "../../api/api_clue";
    import _wx from "../../common/_wx";
    import _object from "../../utils/_object";
    import _float from "../../utils/_float";


    export default {
        name: 'byd_success',
        components: {
            vueQr
        },
        data() {
            return {
                id: '',
                activity_info: {
                    name: '',
                    address: '',
                    tel: '',
                    money: '',
                    level: '',
                    stime: '',
                    etime: '',
                    time_range: ''
                },
                //报名信息
                clue_info: {
                    name: '',
                    phone: '',
                    series: '',
                    money: 0,
                    out_trade_no: '',
                    status: ''
                },
                user_info: null,
                bg_head: ''
            }
        },
        created() {
            document.title = '支付核销码';
            this.id = _url.getParam("id");
            api_clue.clue(this.id, this.init_info)
        },
        methods: {


            init_info(data) {
                const {activity, clue, user} = data
                _object._cover(activity, this.activity_info)
                _object._cover(clue, this.clue_info)
                this.user_info = user

                this.activity_info.time_range = _time._range_date(this.activity_info.stime*1000,this.activity_info.etime*1000)

                if(this.activity_info.level == 1) {
                    this.bg_head = require('../../assets/images/byd/bg_haiyang.jpg')
                } else if(this.activity_info.level == 2) {
                    this.bg_head = require('../../assets/images/byd/bg_wangchao.jpg')
                }
            },

            //金额转换 分 -元
            to_yuan(v) {
                return _float.to_fixed(v / 100)
            },

        },
    }
</script>

<style scoped lang="less">
    @import "../../assets/style/page/success.less";
</style>
